<template>
	<view class="jiaocheng">
		<!-- #ifdef H5 -->
		<view class="tou">
			<Tou></Tou>
			<view v-show="bianse!==0" class="sousuo">
				<image src="https://assets-cdn.lanqb.com/lanqb/m/header-search.png" mode=""></image>
			</view>

		</view>

		<!-- #endif -->
		<view class="nr">
			<!-- 选择标题 -->
			<view class="navtar">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view id="demo1" class="scroll-view-item " @tap="dianji(0)" :class="{se:bianse==0}">分类</view>
					<view id="demo1" class="scroll-view-item " @tap="dianji(1)" :class="{se:bianse==1}">教程</view>
					<view id="demo1" class="scroll-view-item " v-for="(item,index) in mingzi" :key="index"
						@tap="dianji(item.id)" :class="{se:bianse==item.id}">{{item.name}}</view>

				</scroll-view>
			</view>
			<view class="duiying">

				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lowerBottom" @scroll="scroll"
					:scroll-top="scrollTop">
					<view class="swiper-item" v-if="bianse==0">
						<one :item="onemc"></one>
						<view @tap="goTop" class="mubu" v-show="zongge">
							综合↑
						</view>

						<view class="lists">
							<list v-for="(item,index) in list3" :key="index" :item="item"></list>
						</view>

					</view>
					<view class="swiper-item" v-else-if="bianse==1">
						<tow></tow>
						<view class="lists">
							<Biaoti :dixian="false">
								<template v-slot:left>
									<text style="font-size: 32rpx;">精选教程</text>
								</template>
								<template v-slot:right>
									<text>筛选课程</text>
									<text class="iconfont icon-xiangyoujiantou"></text>
								</template>
							</Biaoti>

							<list v-for="(item,index) in list" :key="index" :item="item"></list>

						</view>
						<view class="lists">
							<Biaoti :dixian="false">
								<template v-slot:left>
									<text style="font-size: 32rpx;">最新上架</text>
								</template>
								<template v-slot:right>
									<text>筛选课程</text>
									<text class="iconfont icon-xiangyoujiantou"></text>
								</template>
							</Biaoti>

							<list v-for="(item,index) in list1" :key="index" :item="item"></list>

						</view>
						<view class="lists">
							<Biaoti :dixian="false">
								<template v-slot:left>
									<text style="font-size: 32rpx;">限时免费</text>
								</template>
								<template v-slot:right>
									<text></text>
								</template>
							</Biaoti>

							<list v-for="(item,index) in list2" :key="index" :item="item"></list>

						</view>
					</view>
					<view class="swiper-item" v-else>
						<three class="three" :ids='bianse' @chuan="chuan"></three>
						<view class="lists1" v-show="!localst">
							<list v-for="(item,index) in list4" :key="index" :item="item"></list>
						</view>
						<view class="jiazai" v-show="localst">
							加载中...
						</view>
						
					</view>
				</scroll-view>




			</view>

		</view>
	</view>

</template>

<script>
	import Tou from "@/common/nav-tar.vue"
	import {
		apis
	} from "@/http/api.js"
	import one from "@/components/jiaocheng/one.vue"
	import tow from "@/components/jiaocheng/tow.vue"
	import three from "@/components/jiaocheng/three.vue"
	import Biaoti from "@/components/biaoti.vue"
	import list from "@/components/jiaocheng/liebiao.vue"
	export default {
		data() {
			return {
				mingzi: [],
				bianse: 1,
				
				list: [],
				list1: [],
				list2: [],
				list3: [],
				list4:[],
				onemc: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				zongge: false,
				type:2,
				limit:8,
				page:1,
				ids:6,
				level:'0',
				localst:false,
				
			}
		},
		onLoad() {
			apis.mingzi().then((res) => {
				this.mingzi = res[1].data.course_fields

			})
			apis.lists().then((res) => {
				this.list = res[1].data.data
				// console.log('看',this.list);
			})
			apis.listzuixin().then((res) => {
				this.list1 = res[1].data.data

			})
			apis.listxianshi().then((res) => {
				this.list2 = res[1].data.data

			})
			apis.listmc().then((res) => {
				this.onemc = res[1].data.course_subjects
			})
			apis.listsj().then((res) => {
				this.list3 = res[1].data.data
				// console.log(this.list3);
			})
		},

		methods: {
		
			dianji(val) {
				this.bianse = val
			
this.huoqu()


			},
			huoqu(){
				this.localst=true
							if (this.level==0) {
								apis.listqiesj(this.bianse,this.type,this.limit,this.page).then((res)=>{
										let arr=setTimeout(()=>{
											clearTimeout(arr)
											this.list4=res[1].data.data	
											this.localst=false
										},500) //哈哈,优化速度加钱
								
										
									
								})
							} else{
							apis.listqiehuan(this.bianse,this.type,this.limit,this.page,this.level).then((res)=>{
				let arr=setTimeout(()=>{
					clearTimeout(arr)
					this.list4=res[1].data.data	
					this.localst=false
				},500) //哈哈,优化速度加钱
							})
			}
			},
			lowerBottom() {
				console.log('已触底');
			},
			scroll: function(e) {

				this.scrollTop = e.detail.scrollTop
				if (e.detail.scrollTop >= 210) {
					// console.log('看我');
					this.zongge = true
				} else {
					this.zongge = false
				}
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.old.scrollTop = e.detail.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				// uni.showToast({
				// 	icon: "none",
				// 	title: "纵向滚动 scrollTop 值已被修改为 0"
				// })
			},
			chuan(ids,id){
				this.type=ids
				 if(id==0){
					this.level='0'
				}else if(id==1){
						this.level='1'
				}
				else{
					this.level='2,3,4,5'
				}
				
				console.log(ids,id,this.level);
				this.huoqu()
			},
			





		},
		components: {
			Tou,
			one,
			tow,
			three,
			Biaoti,
			list,
		}
	}
</script>

<style lang="scss" scoped>
	.tou {
		position: relative;

		.sousuo {
			position: absolute;
			top: 14rpx;
			right: 220rpx;
			width: 84rpx;
			height: 56rpx;

			image {
				width: 100%;
				height: 100%;
			}

		}
	}

	.nr {

		.scroll-view_H {
			white-space: nowrap;
			width: 100vw;
			height: 126rpx;

			padding: 39rpx 33rpx 0rpx;
			box-sizing: border-box;

			.scroll-view-item {
				display: inline-block;
				text-align: center;
				margin: 0rpx 20rpx;
				font-size: 28rpx;
			}

			.se {
				color: #1a1b1e;
				font-size: 36rpx;
				font-weight: 700;
			}
		}

		scroll-view ::-webkit-scrollbar {

			display: none;

		}

		.scroll-Y {
			height: 70vh;
			padding: 0px 32rpx;
			box-sizing: border-box;

			.swiper-item:nth-child(1) {
				position: relative;

				.mubu {
					position: fixed;
					top: 293rpx;
					left: 0rpx;
					width: 100vw;
					height: 90rpx;
					z-index: 99;
					text-align: center;
					line-height: 90rpx;
					background-color: #fff;
				}
				.three{
				position: fixed;
				top: 293rpx;
				width: 100vw;
				height: 90rpx;
				line-height: 90rpx;
				z-index: 99;
				padding: 0 32rpx;
				box-sizing: border-box;
						background-color: #fff;
					
				}
				.jiazai{
					text-align: center;
					margin-top: 100rpx;
				}
			}
		
			
				.three{
				position: fixed;
				top: 293rpx;
					
					left:0rpx
				}
			

			.lists {
				margin-bottom: 20rpx;
			}
			.lists1{
				margin-top: 100rpx;
			}
			
		}


	}
</style>
